<template>
	<div class="statusbar">
		<div class="div1">
			<router-link to="/pc/home">
				首页书城
			</router-link>
		</div>

		<div class="div2">
			你好,
			<span v-if="user==null">
				请<router-link to="/pc/login">登录</router-link>|<router-link to="/pc/register">免费注册</router-link>
			</span>
			<span v-if="user!=null">
				<label> {{user.name}} </label> <button @click="out()">退出登录</button>
			</span>
		</div>
		<div class="div3">
			<router-link to="/">我的购物车</router-link> | <router-link to="/">我的订单</router-link>
		</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex';
	export default {
		name: 'Statusbar',
		computed: {
			...mapState('user', ['user'])
		},
		methods: {
			...mapActions('user', ['selWord']),
			...mapActions('user', ['selToken']),

			out() {
				this.selToken('')
				this.selWord(null)
				this.$router.push('/pc/home');
			}
		},


	}
</script>

<style scoped>
	.statusbar {
		width: 100%;
		height: 45px;
		background-color: #e3e4e5;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.statusbar a {
		color: #999;
	}

	.statusbar a:hover {
		color: #e33333;
	}

	.statusbar .div1 {
		margin-left: 2%;
	}

	.statusbar .div2 label {
		color: #e33333;
	}


	.statusbar .div3 {
		margin-right: 5%;
	}

	.statusbar button {
		border: none;
		outline: none;
		/*清除默认背景 */
		background-color: transparent;
		color: #000000;
	}

	.statusbar button:hover {
		color: #e33333;
	}

	.statusbar img {
		vertical-align: middle;
		width: 36px;
		height: 36px;
		border-radius: 50%;
	}
</style>